<template>
  <div class="page-detail">
    <van-nav-bar
      title="生产详情"
      left-arrow
      @click-left="$router.go(-1)"
    />
    <div
      class="loading"
      v-if="loading"
    >
      <van-loading />
    </div>
    <div
      class="list"
      v-else
    >
      <div class="bridge-info">
        <div class="text">
          <div class="title">
            钠朗1号高价大桥右幅1-1
          </div>
          <div class="item">
            生产线：1号生产线
          </div>
          <div class="item">
            理论长度：4000CM
          </div>
          <div class="item">
            理论长度：4000CM
          </div>
          <div class="item">
            理论长度：4000CM
          </div>
          <div class="item">
            理论长度：4000CM
          </div>
          <div class="item">
            理论长度：4000CM
          </div>
          <div class="item">
            理论长度：4000CM
          </div>
          <div class="item">
            理论长度：4000CM
          </div>
          <div class="item">
            理论长度：4000CM
          </div>
          <div class="item">
            理论长度：4000CM
          </div>
          <div class="item">
            理论长度：4000CM
          </div>
          <div class="item">
            理论长度：4000CM
          </div>
        </div>
        <div class="info">
          <div class="status">
            已完成
          </div>
          <div class="qrcode">
            <van-icon name="qr" />
          </div>
        </div>
      </div>
      <div class="process-info">
        <div class="text">
          <div class="title">
            顶板绑扎阿斯顿
          </div>
          <div class="item">
            开始时间：<span>2022-08-05 10:24</span>
          </div>
          <div class="item">
            结束时间：<span>2022-08-05 10:24</span>
          </div>
          <div class="item">
            责任人：<span>张衡</span>
          </div>
          <div class="item">
            用时：<span>6小时47分钟</span>
          </div>
        </div>
        <div class="status">
          已完成
        </div>
      </div>
      <div class="process-info">
        <div class="text">
          <div class="title">
            腹板绑扎
          </div>
          <div class="item">
            开始时间：<span>2022-08-05 10:24</span>
          </div>
          <div class="item">
            结束时间：<span>2022-08-05 10:24</span>
          </div>
          <div class="item">
            责任人：<span>张衡</span>
          </div>
          <div class="item">
            用时：<span>6小时47分钟</span>
          </div>
        </div>
        <div class="status nostart">
          未开始
        </div>
      </div>
      <div class="process-info">
        <div class="text">
          <div class="title">
            合模
          </div>
          <div class="item">
            开始时间：<span>2022-08-05 10:24</span>
          </div>
          <div class="item">
            结束时间：<span>2022-08-05 10:24</span>
          </div>
          <div class="item">
            责任人：<span>张衡</span>
          </div>
          <div class="item">
            用时：<span>6小时47分钟</span>
          </div>
        </div>
        <div class="status nostart">
          未开始
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "PreBridgeDetail",
  data() {
    return {
      id: null,
      loading: false,
      prebridge: null,
      task: null,
      list: [],
    };
  },
  created() {
    this.id = this.$route.params.id
    // this.getData()
  },
  methods: {
    async getData() {
      this.$toast.loading({  message: '加载中...', forbidClick: true });
      // 获取预制梁信息
      let prebridge = await this.api.GET_PREBRIDGE_DETAIL(this.id)
      this.$set(this, 'prebridge', prebridge)

      // 获取预制梁对应的任务
      let task = await this.api.QUERY_DAY_PLAN_LIST({ pageNo: 1, pageSize: 10, searchName: 'preBridgeId', searchKeyword: this.id })
      console.log(task)
      if (task.list[0]) {
        this.$set(this, 'task', task.list[0])

        // 获取任务工序列表
        await this.getTaskList()
      }

      this.$toast.clear()
    },
    async getTaskList() {
      let res = await this.api.GET_TASK_DETAILS(this.task.id)
      res = res.sort((a, b) => a.procedureOrder - b.procedureOrder)
      console.log(res)
    }
  }
};
</script>

<style lang="scss" scoped>
@import "./style.scss";
</style>
